import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get_rx/src/rx_typedefs/rx_typedefs.dart';

//会员卡实例

class MemberCardItem extends StatefulWidget {
  /// 类型 1 月卡， 2 季卡 ，3 年卡
  final int type;

  /// 价格
  final String price;

  ///是否选中
  final bool? selected;

  ///点击事件
  final Callback onClick;

  MemberCardItem({super.key, required this.type, required this.price, this.selected = false, required this.onClick});

  @override
  State<MemberCardItem> createState() => _MemberCardItemState();
}

class _MemberCardItemState extends State<MemberCardItem> {
  late Color topboxTxtColor;
  //超值推荐文本颜色
  late Color boderColor;
  //边框颜色
  late Color backgroundColor;
  //容器背景颜色
  late Color buttonTxtColor;
  //按钮文本颜色
  late Color buttonBackgroundColor;

  late Color cardTextColor;

  late String cardName;

  late String typeString;

  late String bgImageTitle;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //选中样式
    if (widget.selected == true) {
      topboxTxtColor = Tools.fromHex("#D5BA7B");
      boderColor = Tools.fromHex("#F83F2D");
      backgroundColor = Tools.fromHex("#FFF6E0");
      buttonTxtColor = Tools.fromHex("#D5BA7B");
      buttonBackgroundColor = Colors.black;
    } else {
      topboxTxtColor = Colors.white;
      boderColor = Tools.fromHex("#D5BA7B");
      backgroundColor = Colors.white;
      buttonTxtColor = Tools.fromHex("#F83F2D");
      buttonBackgroundColor = Tools.fromHex("#F7D8D5");
    }

    buildBaseInfo();

    return BaseInteractive(
      onClick: widget.onClick,
      childWidget: Container(
        margin: EdgeInsets.only(right: 8.w),
        width: 155.w,
        height: 155.h,
        child: Stack(
          children: [
            Positioned(
              top: 5,
              left: 0,
              child: Container(
                margin: const EdgeInsets.all(5),
                width: 150.w,
                height: 150.h,
                padding: EdgeInsets.only(left: 20.w, top: 22.w, right: 20.w),
                decoration: BoxDecoration(
                  color: backgroundColor,
                  border: Border.all(
                    color: boderColor,
                    width: 1,
                  ),
                  borderRadius: BorderRadius.circular(10), // 设置边框为圆角
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Stack(
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(5),
                          child: BaseImage(
                            url: bgImageTitle ?? '',
                            width: double.infinity,
                            height: 70,
                          ),
                        ),
                        Positioned(
                            top: 5,
                            left: 5,
                            child: Text(
                              cardName,
                              style: TextStyle(
                                color: cardTextColor,
                                fontSize: 11,
                                fontWeight: FontWeight.w500,
                              ),
                            )),
                        buildPerDescWidget(cardTextColor: cardTextColor),
                      ],
                    ),
                    const SizedBox(height: 10),
                    Text(cardName),
                    Container(
                      margin: const EdgeInsets.only(top: 10),
                      child: buildPreRowWidget(cardTextColor: Tools.fromHex('#F83F2D'), isBold: true),
                    )
                  ],
                ),
              ),
            ),
            Positioned(
                top: 0,
                left: 0,
                child: ClipPath(
                  clipper: TrapezoidClipper(),
                  child: Container(
                    width: 60.w,
                    height: 20.h,
                    alignment: Alignment.center,
                    color: Colors.black,
                    child: Text(
                      "超值推荐",
                      style: TextStyle(fontSize: 10, fontWeight: FontWeight.w300, color: topboxTxtColor),
                    ),
                  ),
                )),
          ],
        ),
      ),
    );
  }

  Positioned buildPerDescWidget({Color? cardTextColor}) {
    return Positioned(
      bottom: 5,
      left: 5,
      child: buildPreRowWidget(cardTextColor: cardTextColor),
    );
  }

  Row buildPreRowWidget({Color? cardTextColor, bool? isBold = false}) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          '¥',
          style: TextStyle(color: cardTextColor, fontWeight: isBold == true ? FontWeight.w700 : FontWeight.w400, fontSize: isBold == true ? 15 : 10),
        ),
        SizedBox(width: isBold == true ? 0 : 5),
        Text(
          widget.price,
          style: TextStyle(color: cardTextColor, fontWeight: isBold == true ? FontWeight.w700 : FontWeight.w900, fontSize: isBold == true ? 15 : 16),
        ),
        // Text(
        //   '/$typeString',
        //   style: TextStyle(color: cardTextColor, fontWeight: isBold == true ? FontWeight.w700 : FontWeight.w400, fontSize: isBold == true ? 15 : 10),
        // ),
      ],
    );
  }

  buildBaseInfo() {
    switch (widget.type) {
      case 1:
        cardName = "月卡";
        typeString = '月';
        bgImageTitle = 'card_month.png';
        cardTextColor = Tools.fromHex('#6C3E02');

        break;
      case 2:
        cardName = "季卡";
        typeString = '季';
        bgImageTitle = 'card_quarter.png';
        cardTextColor = Tools.fromHex('#6C3E02');
        break;
      case 3:
        cardName = "年卡";
        typeString = '年';
        bgImageTitle = 'card_year.png';
        cardTextColor = Tools.fromHex('#FFFFFF');
        break;
      default:
    }
  }
}

//用canvas剪切直角梯形
class TrapezoidClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width * 0.88, 0);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}
